<template>
    <div class="my_dynamic">
        <div class="dynamic_content">
            <div class="title">{{ $t('cir.朋友圈') }}</div>
            <div class="dynamic_view">
                <div class="dynamic_header">
                    <img :src="background" alt="" class="bg_img">
                    <div class="user_info">
                        <div class="user_name">{{ user.nickname }}</div>
                        <img :src="user.avatar" alt="" class="user_avatar">
                    </div>
                </div>

                <div class="dynamic_list">
                    <div class="today" @click="router()">
                        <div class="time">{{ $t('msg.今天') }}</div>
                        <img src="@/assets/image/g_a.png" alt="">
                    </div>

                    <div class="setting" v-if="!setting">
                        <div class="show_item" v-if="checked == 1">
                            —— {{ $t('msg.对朋友展示所有内容') }} ——
                        </div>
                        <div class="show_item" v-if="checked == 2">
                            —— {{ $t('msg.仅对朋友展示最近半年内容') }} ——
                        </div>
                        <div class="show_item" v-if="checked == 3">
                            —— {{ $t('msg.仅对朋友展示最近一个月内容') }} ——
                        </div>
                        <div class="show_item" v-if="checked == 4">
                            —— {{ $t('msg.仅对朋友展示最近三天内容') }} ——
                        </div>
                        <div class="show_setup" @click="setting = true">
                            {{ $t('msg.前往设置') }}
                        </div>
                    </div>

                    <div class="setting" v-else>
                        <el-radio v-model="checked" :label="1" border @change="handleCheckedChange">{{ $t('msg.全部')
                        }}</el-radio>
                        <el-radio v-model="checked" :label="2" border @change="handleCheckedChange">{{ $t('msg.最近半年')
                        }}</el-radio>
                        <el-radio v-model="checked" :label="3" border @change="handleCheckedChange">{{ $t('msg.最近一个月')
                        }}</el-radio>
                        <el-radio v-model="checked" :label="4" border @change="handleCheckedChange">{{ $t('msg.最近三天')
                        }}</el-radio>
                    </div>

                    <div class="item" v-for="(item, index) in list" :key="index"
                        @click.stop="router(item.id, 'dynamicDeta')">
                        <div class="item_view">
                            <div class="time">
                                <span class="value">{{ item.day }}</span>
                                <span class="key">{{ item.month }}{{ $t('msg.月') }}</span>
                            </div>

                            <div class="item_info">
                                <div class="item_info_value">{{ item.content }}</div>
                                <IndexCover :list="item.images" v-if="item.images.length" />
                                <IndexVideo :src="item.video" v-if="item.video" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_view">
                <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="page"
                    :total="total" @current-change="change" />
            </div>
        </div>
    </div>
</template>
<script>
import {
    mapState
} from 'vuex';
import IndexCover from "@/components/my/IndexCover.vue"
import IndexVideo from "@/components/my/IndexVideo.vue"
export default {
    components: {
        IndexCover,
        IndexVideo
    },
    computed: {
        ...mapState({
            user: state => state.user,
        })
    },
    data() {
        return {
            background: "",
            checked: 1, // 默认值，将在created中根据user.moment_visible_range更新
            setting: false,

            page: 1,
            list: [],
            total: 0,
            debounceTimer: null // 防抖定时器
        }
    },
    created() {
        // 初始化checked值，使用用户设置或默认值1
        this.checked = this.user?.moment_visible_range || 1;
        this.getList()
    },
    beforeDestroy() {
        // 组件销毁前清除定时器，避免内存泄漏
        if (this.debounceTimer) {
            clearTimeout(this.debounceTimer);
            this.debounceTimer = null;
        }
    },
    methods: {
        async getList() {
            const user_id = this.user.user_id;
            let res = await this.$api.momentApi.momentList({
                target_user_id: user_id,
                is_publish: 1,
                page: this.page,
                page_size: 10
            });
            let list = res.list;
            this.list = list.data;
            this.total = list.total;
            if (this.page == 1) this.background = res.moment_bg_image;
        },
        change(value) {
            this.page = value;
            this.getList();
        },
        /**
         * 处理单选框变化事件，使用防抖函数
         * 2秒后调用接口更新设置
         */
        handleCheckedChange() {
            // 清除之前的定时器
            if (this.debounceTimer) clearTimeout(this.debounceTimer);

            // 设置新的定时器，2秒后执行
            this.debounceTimer = setTimeout(async () => {
                await this.changeChecked();
            }, 2000);
        },

        /**
         * 调用接口更新可见范围设置
         */
        async changeChecked() {
            await this.$api.momentApi.setVisibleRange({
                visible_range: this.checked
            });
            this.$message({
                message: this.$t('msg.操作成功'),
                type: 'success'
            });
            // 接口调用成功后，退出设置状态
            this.setting = false;
        },

        router(id, name) {
            if (!id) {
                this.$router.push({
                    name: 'addDynamic'
                })
                return
            }
            this.$router.push({
                name: name,
                query: { id }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.my_dynamic {
    min-width: 100%;
    min-height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;
    position: relative;
    overflow: hidden;

    .dynamic_content {
        height: 100%;
        overflow-y: auto;
    }

    .title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding-bottom: 16px;
    }

    .dynamic_view {
        width: 544px;
        margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px 4px 4px 4px;

        .dynamic_header {
            width: 100%;
            height: 330px;
            position: relative;

            .bg_img {
                width: 100%;
                height: 100%;
            }

            .user_info {
                position: absolute;
                right: 16px;
                bottom: -12px;
                z-index: 2;
                display: flex;
                align-items: center;

                .user_name {
                    font-size: 14px;
                    color: #FFFFFF;
                    padding-right: 8px;
                }

                .user_avatar {
                    width: 48px;
                    height: 48px;
                    border-radius: 6px 6px 6px 6px;
                }
            }
        }

        .dynamic_list {
            padding: 55px 16px;
            box-sizing: border-box;

            .today {
                display: flex;

                .time {
                    color: #333333;
                    font-size: 20px;
                    font-weight: 400;
                    padding-right: 25px;
                    box-sizing: border-box;
                }

                img {
                    width: 82px;
                    height: 82px;
                    cursor: pointer;
                }
            }

            .setting {
                padding: 55px 0;

                .show_item {
                    color: #999999;
                    font-size: 14px;
                    font-weight: 400;
                    text-align: center;
                }

                .show_setup {
                    font-weight: 400;
                    font-size: 14px;
                    color: #4A5F7C;
                    text-align: center;
                    cursor: pointer;
                }
            }


            .item {
                border-bottom: 1px solid #EDEDED;
                padding-bottom: 16px;
                padding-top: 24px;

                &_view {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .time {
                        padding-right: 25px;
                        box-sizing: border-box;

                        .value {
                            font-weight: 400;
                            font-size: 30px;
                            color: #333333;
                        }

                        .key {
                            font-weight: 400;
                            font-size: 16px;
                            color: #333333;
                        }
                    }
                }

                &_info {
                    flex: 1;
                    padding: 0 8px;
                    box-sizing: border-box;

                    &_value {
                        font-size: 14px;
                        color: #333333;
                        margin: 8px 0;
                    }
                }
            }
        }
    }
}
</style>
